<template>
  <div>
    <div ref="chartContainer" style="width: 1000px; height: 400px"></div>
  </div>
</template>
 
 <script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { getLogs } from "../api/log";
//引入echarts
const chartContainer = ref(null);

onMounted(async () => {
  const { data } = await getLogs();
  console.log(data.data);
  const times = []
  const conuts = []
  data.data.forEach(element => {
    times.push(element.time)
    conuts.push(element.count)
  });
  console.log(times);
  const chart = echarts.init(chartContainer.value);
  const option = {
    // ECharts 配置项
    xAxis: {
      type: "category",
      data: times,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: conuts,
        type: "line",
      },
    ],
  };
  chart.setOption(option);
});
</script>
 
 <style scoped>
</style>